{% extends 'base.html' %}
{% block title %}
    <title>{{ title }}</title>
{% endblock %}
{% block customcss %}
    <style>
        .main-content {
            background-color: #fff;
        }
    </style>
{% endblock %}
{% block content %}
    <div class="demoTable">
        搜索数据源：
        <div class="layui-inline">
            <input class="layui-input" name="search" id="search" autocomplete="off">
        </div>
        <button class="layui-btn" data-type="reload" id="search_btn">搜索</button>
        <button style="float: right" data-method="offset" id="add_source" data-type="auto"
                class="layui-btn layui-btn-normal">新增数据库源
        </button>
    </div>
    <table class="layui-table"
           lay-data="{url:'/data_source/source_info/', page:true,limit:10, id:'data_source_table'}"
           lay-filter="data_source">
        <thead>
        <tr>
            {#        注释掉的内容是当有复选框时，启用#}
            {#            <th lay-data="{type:'checkbox', fixed: 'left'}"></th>#}
            <th lay-data="{field:'id', width:80, sort: true, fixed: true}">序号</th>
            <th lay-data="{field:'source_name', width:110}">数据源名称</th>
            {#            <th lay-data="{field:'host_ip', width:100}">主机ip</th>#}
            <th lay-data="{field:'host_ip', width:140}">主机ip</th>
            {#            <th lay-data="{field:'db_ip', width:100}">数据库ip</th>#}
            <th lay-data="{field:'db_ip', width:140}">数据库ip</th>
            <th lay-data="{field:'port', width:80}">端口号</th>
            <th lay-data="{field:'db_cate', width:80}">数据库</th>
            <th lay-data="{field:'sid', width:115}">数据库名/SID</th>
            {#            <th lay-data="{field:'sid', width:100}">数据库名/SID</th>#}
            <th lay-data="{field:'schema', width:60}">模式</th>
            {#            <th lay-data="{field:'desc', width:100}">数据库描述</th>#}
            <th lay-data="{field:'desc', width:130}">数据库描述</th>
            {% if level_id == 0 %}
                {#                超级管理员可以看到创建者#}
                <th lay-data="{field:'username', width:80}">创建者</th>
            {% endif %}
            {#            <th lay-data="{fixed: 'right', width:190, align:'center', toolbar: '#operate_bar'}">操作</th>#}
            <th lay-data="{fixed: 'right', width:195, align:'center', toolbar: '#operate_bar'}">操作</th>
        </tr>
        </thead>
    </table>
    <script type="text/html" id="operate_bar">
        <a class="layui-btn layui-btn-xs" id="edit_source" data-method="edit_source" data-type="auto"
           lay-event="edit_source" title="编辑"><i class="layui-icon">&#xe642;</i></a>
        <a class="layui-btn layui-btn-warm layui-btn-xs" title="连接测试" lay-event="test_after"><i class="layui-icon">&#xe623;</i></a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" title="删除" lay-event="del"><i class="layui-icon">&#xe640;</i></a>
    </script>
    {#    数据添加的form表单#}
    <div class="layui-row" id="add_source_form" style="display: none; padding: 10px">
        <div class="layui-col-md10">
            <form class="layui-form">
                <div class="layui-form-item">
                    <label class="layui-form-label">数据源名称<i class="require_i">*</i></label>
                    <div class="layui-input-block">
                        <input type="text" name="source_name" lay-verify="source_name" placeholder="请输入数据源名称"
                               autocomplete="off"
                               class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">数据库ip<i class="require_i">*</i></label>
                    <div class="layui-input-block">
                        <input type="text" name="db_ip" lay-verify="ip" placeholder="请输入数据库ip"
                               autocomplete="off"
                               class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">主机ip<i class="require_i">*</i></label>
                    <div class="layui-input-block">
                        <input type="text" name="host_ip" lay-verify="ip" placeholder="请输入主机ip"
                               autocomplete="off"
                               class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">端口号<i class="require_i">*</i></label>
                    <div class="layui-input-block">
                        <input type="text" name="port" lay-verify="required" placeholder="请输入端口号"
                               autocomplete="off"
                               class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">数据库类型<i class="require_i">*</i></label>
                    <div class="layui-input-block">
                        <select name="db_cate" lay-verify="required">
                            <option value=""></option>
                            <option value="0">MySQL</option>
                            <option value="1">Oracle</option>
                        </select>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">DB/SID<i class="require_i">*</i></label>
                    <div class="layui-input-block">
                        <input type="text" name="db_name" lay-verify="required"
                               placeholder="请输入数据库名或SID"
                               autocomplete="off"
                               class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">用户名<i class="require_i">*</i></label>
                    <div class="layui-input-block">
                        <input type="text" name="db_username" lay-verify="required"
                               placeholder="请输入用户名"
                               autocomplete="off"
                               class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">密码<i class="require_i">*</i></label>
                    <div class="layui-input-block">
                        <input type="password" name="db_password" placeholder="请输入密码"
                               autocomplete="off" lay-verify="required"
                               class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">模式</label>
                    <div class="layui-input-block">
                        <input type="text" name="schema"
                               placeholder="请输入模式"
                               autocomplete="off"
                               class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">JDBC</label>
                    <div class="layui-input-block">
                        <input type="text" name="jdbc"
                               autocomplete="off"
                               class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item layui-form-text">
                    <label class="layui-form-label">数据库描述</label>
                    <div class="layui-input-block">
                        <textarea placeholder="请输入内容" name="desc" class="layui-textarea"></textarea>
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button class="layui-btn" lay-submit lay-filter="test_before">测试</button>
                        <button class="layui-btn" lay-submit lay-filter="add_source_submit">保存</button>
                        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
    {#    数据回显的form表单#}
    <div class="layui-row" id="edit_source_form" style="display: none; padding: 10px">
        <div class="layui-col-md10">
            <form class="layui-form" lay-filter="edit_source">
                <input type="hidden" name="source_id">
                <div class="layui-form-item">
                    <label class="layui-form-label">数据源名称<i class="require_i">*</i></label>
                    <div class="layui-input-block">
                        <input type="text" name="source_name" lay-verify="source_name" placeholder="请输入数据源名称"
                               autocomplete="off"
                               class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">数据库ip<i class="require_i">*</i></label>
                    <div class="layui-input-block">
                        <input type="text" name="db_ip" lay-verify="ip" placeholder="请输入数据库ip"
                               autocomplete="off"
                               class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">主机ip<i class="require_i">*</i></label>
                    <div class="layui-input-block">
                        <input type="text" name="host_ip" lay-verify="ip" placeholder="请输入主机ip"
                               autocomplete="off"
                               class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">端口号<i class="require_i">*</i></label>
                    <div class="layui-input-block">
                        <input type="text" name="port" lay-verify="required" placeholder="请输入端口号"
                               autocomplete="off"
                               class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">数据库类型<i class="require_i">*</i></label>
                    <div class="layui-input-block">
                        <select name="db_cate_value" lay-verify="required">
                            <option value=""></option>
                            <option value="0">MySQL</option>
                            <option value="1">Oracle</option>
                        </select>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">DB/SID<i class="require_i">*</i></label>
                    <div class="layui-input-block">
                        <input type="text" name="db_name" lay-verify="required"
                               placeholder="请输入数据库名或SID"
                               autocomplete="off"
                               class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">用户名<i class="require_i">*</i></label>
                    <div class="layui-input-block">
                        <input type="text" name="db_username"
                               placeholder="请输入用户名"
                               autocomplete="off"
                               class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">密码<i class="require_i">*</i></label>
                    <div class="layui-input-block">
                        <input type="password" name="db_password" placeholder="请输入密码"
                               autocomplete="off"
                               class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">模式</label>
                    <div class="layui-input-block">
                        <input type="text" name="schema"
                               placeholder="请输入模式"
                               autocomplete="off"
                               class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">JDBC</label>
                    <div class="layui-input-block">
                        <input type="text" name="jdbc"
                               autocomplete="off"
                               class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item layui-form-text">
                    <label class="layui-form-label">数据库描述</label>
                    <div class="layui-input-block">
                        <textarea placeholder="请输入内容" name="desc" class="layui-textarea"></textarea>
                    </div>
                </div>


                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button class="layui-btn" lay-submit lay-filter="test_before">测试</button>
                        <button class="layui-btn" lay-submit lay-filter="edit_source_submit">保存</button>
                        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                    </div>
                </div>
            </form>
        </div>
    </div>

{% endblock %}
{% block customjs %}
    <script src="/static/js/set_csrf_async.js"></script>
    <script>
        layui.use(['table', 'form'], function () {
            var table = layui.table;
            var layer = layui.layer;
            var active = {
                // 添加数据源按钮点击事件对应的处理方式
                offset: function (othis) {
                    var type = othis.data('type')
                        , text = othis.text();
                    layer.open({
                        type: 1
                        , title: '添加数据源'
                        , offset: type
                        , id: 'add_source' + type //防止重复弹出
                        , content: $('#add_source_form')
                        , area: ['700px', '600px']
                        // , btn: ['保存', '取消']
                        , btnAlign: 'c' //按钮居中
                        , shade: 0 //不显示遮罩
                    });

                } // 点击编辑资源按钮事件弹出内容
                , edit_source: function (othis) {
                    var type = othis.data('type')
                        , text = othis.text();
                    layer.open({
                        type: 1
                        , title: '编辑数据源'
                        , offset: type
                        , id: 'edit_source' + type //防止重复弹出
                        , content: $('#edit_source_form')
                        , area: ['700px', '600px']
                        // , btn: ['保存', '取消']
                        , btnAlign: 'c' //按钮居中
                        , shade: 0 //不显示遮罩
                    });
                }  // 点击搜索按钮，重新加载表格数据
                , reload: function () {
                    var search = $('#search');
                    //执行重载
                    table.reload('data_source_table', {
                        page: {
                            curr: 1 //重新从第 1 页开始
                        }
                        , where: {
                            search_info: search.val()
                        }
                    });
                }
            };
            // 点击搜索按钮事件
            $('#search_btn').on('click', function () {
                var type = $(this).data('type');
                active[type] ? active[type].call(this) : '';
            });
            // 添加资源按钮点击事件
            $('#add_source').on('click', function () {
                var othis = $(this), method = othis.data('method');
                active[method] ? active[method].call(this, othis) : '';
            });

            //监听操作选项的工具条事件
            table.on('tool(data_source)', function (obj) {
                var data = obj.data;
                if (obj.event === 'test_after') {
                    // 数据源保存后测试数据库连接
                    $.ajax({
                            type: 'get',
                            url: '/data_source/connection/?source_id=' + data.source_id,
                            dataType: 'json',
                            success: function (data) {
                                if (data.code === 0) {
                                    layer.msg(data.msg, {
                                        icon: 6, time: 2000
                                    });
                                } else {
                                    layer.alert('Failed:' + data.msg);
                                }
                            }
                        }
                    )
                } else if (obj.event === 'del') {
                    layer.confirm('真的删除么?', function (index) {
                        // 向服务端发送删除指令
                        $.ajax({
                                type: 'delete',
                                url: '/data_source/source_info/',
                                data: {source_id: data.source_id},
                                dataType: 'json',
                                success: function (data) {
                                    if (data.code === 0) {
                                        layer.msg(data.msg, {
                                            icon: 6, time: 2000, end: function () {
                                                location.reload()
                                            }
                                        });
                                    } else {
                                        layer.alert(data.msg)
                                    }
                                }
                            }
                        )
                    });
                } else if (obj.event === 'edit_source') {
                    var othis = $(this), method = othis.data('method');
                    active[method] ? active[method].call(this, othis) : '';
                    // 回显数据form表单，数据表格列表获取时，一次请求，获取所有数据
                    form.val('edit_source', {
                        "db_username": data.db_username
                        , "source_id": data.source_id
                        , "host_ip": data.host_ip
                        , "db_ip": data.db_ip
                        , "port": data.port
                        , "db_cate_value": data.db_cate_value
                        , "db_name": data.sid
                        , "db_password": data.db_password
                        , "schema": data.schema
                        , "desc": data.desc
                        , "source_name": data.source_name
                        , "jdbc": data.jdbc_url
                    });
                }
            });


            var form = layui.form;
            // 自定义表单验证
            form.verify({
                source_name: [/^[a-zA-Z\u4e00-\u9fa5_][a-zA-Z0-9\u4e00-\u9fa5_]+$/, '数据源名称只能为数字字母汉字，且不能以数字开头']
                , ip: [/((2[0-4]\d|25[0-5]|[01]?\d\d?)\.){3}(2[0-4]\d|25[0-5]|[01]?\d\d?)/, 'ip地址格式不正确，请重新输入']
                , port: [/^\d{1,6}$/, '端口号必须为数字，且不能大于6位']
            });

            // 新增及修改数据源表单异步提交
            function request_source(type, data) {
                $.ajax({
                        type: type,
                        url: '/data_source/source_info/',
                        data: data.field,
                        dataType: 'json',
                        success: function (data) {
                            if (data.code === 0) {
                                layer.msg(data.msg, {
                                    icon: 6, time: 2000, end: function () {
                                        location.href = '/data_source/'
                                    }
                                });
                            } else {
                                layer.alert('Failed:' + data.msg);
                            }
                        }
                    }
                );
            }

            // 监听新增数据源表单提交
            form.on('submit(add_source_submit)', function (data) {
                request_source('post', data);
                return false;
            });

            // 监听修改数据源信息表单提交
            form.on('submit(edit_source_submit)', function (data) {
                request_source('put', data);
                return false;
            });

            // 保存之前进行数据库连接测试
            form.on('submit(test_before)', function (data) {
                $.ajax({
                        type: 'post',
                        url: '/data_source/connection/',
                        data: data.field,
                        dataType: 'json',
                        success: function (data) {
                            if (data.code === 0) {
                                layer.msg(data.msg, {
                                    icon: 6, time: 2000
                                });
                            } else {
                                layer.alert('Failed:' + data.msg);
                            }
                        }
                    }
                );
                return false;
            });
        });
    </script>
{% endblock %}





